import {Button, Card, Popconfirm, Space, Statistic, Tooltip, Typography} from 'antd';
import React, {useEffect} from 'react';
import LessonStatusTag from './LessonStatusTag';
import {
  CalendarOutlined,
  CarOutlined,
  DeleteOutlined,
  EditOutlined,
  InfoCircleOutlined,
  RedoOutlined,
  StopOutlined, UserOutlined
} from '@ant-design/icons';
import {LessonType} from "@/constants/LessonConstants";
import DateUtil from "@/utils/DateUtils";
import LessonEditForm from "@/pages/lesson-manager/components/LessonEditForm";
import {useLesson} from "@/hooks/useLesson";

const {Text} = Typography;

interface LessonCardProps {
  lesson: API.ILesson;
  onEdit: (lesson: API.ILesson) => Promise<boolean>;
  onDelete: (id: string) => Promise<void>;
  onStop: (values: API.ILesson) => void;
  onStudent: (values: API.ILesson) => void;
  onDetail: (values: API.ILesson) => void;
}

const LessonCard: React.FC<LessonCardProps> = ({lesson, onEdit, onDelete, onStop, onDetail,onStudent}) => {

  const {currentStatusConfig} = useLesson(lesson)
  useEffect(() => {
    console.log(currentStatusConfig, "currentStatusConfig")
  }, [])

  return (
    <Card
      title={`${lesson.licenseTypeName}(${lesson.licenseTypeCode})-${lesson.courseSubjectName}`}
      extra={<LessonStatusTag currentStatusConfig={currentStatusConfig}/>}
      style={{boxShadow: '0 0 4px rgba(0,0,0,0.1)'}}
      hoverable
      actions={[
        <Tooltip title={'点击编辑课时信息'}>
          <LessonEditForm
            initialValues={lesson}
            onSubmit={async (values) => {
              return onEdit(values)
            }}
            trigger={
              <Button
                disabled={DateUtil.isBefore(lesson.startTime, new Date())}
                type="link"
                icon={<EditOutlined/>}
              />
            }
          />
        </Tooltip>,
        <Tooltip title={'点击查看预约详情'}>
          <Button
            type="link"
            icon={<InfoCircleOutlined/>}
            onClick={() => onDetail(lesson)}
          />
        </Tooltip>,
        <Tooltip title={'点击查看预约学员'}>
          <Button
            type="link"
            icon={<UserOutlined/>}
            onClick={() => onStudent(lesson)}
          />
        </Tooltip>,
        <Tooltip
          title={lesson.status === "1" || lesson.status === "2" ? '点击禁止预约，但已预约的学生正常上课' : '点击恢复预约'}>
          {lesson.status === '1' || lesson.status === '2' ? <Popconfirm
            title={lesson.status === "1" || lesson.status === "2" ? '确定要禁止预约吗？' : '确定要恢复预约吗？'}
            onConfirm={() => onStop(lesson)}
            okText="确定"
            cancelText="取消"
          >
            <Button
              disabled={lesson.status === '2' || DateUtil.isBefore(lesson.startTime, new Date())}
              type="link"
              danger
              icon={<StopOutlined/>}
            />
          </Popconfirm> : (
            <Button
              onClick={() => onStop(lesson)}
              disabled={lesson.status === '2' || DateUtil.isBefore(lesson.startTime, new Date())}
              type="link" icon={<RedoOutlined/>}/>
          )}
        </Tooltip>,
        <Tooltip title={'点击删除课程信息并解散所有预约'}>
          <Popconfirm
            title="确定删除课程，并解散所有预约？"
            onConfirm={() => onDelete(lesson.id)}
            okText="确定"
            cancelText="取消"
          >
            <Button
              disabled={DateUtil.isBefore(lesson.endTime, new Date())}
              type="link"
              danger icon={<DeleteOutlined/>}></Button>
          </Popconfirm>
        </Tooltip>
      ]}
    >
      <Space direction="vertical" size="middle" style={{width: '100%'}}>
        <div>
          <Text type="secondary"><CalendarOutlined/> 时间: </Text>
          <Text>
            {DateUtil.formatCustom(lesson.startTime, "MM月DD日")}&nbsp;&nbsp;
            {DateUtil.formatCustom(lesson.startTime, "HH:mm")} ~ {DateUtil.formatCustom(lesson.endTime, "HH:mm")}</Text>
        </div>

        <div>
          <Text type="secondary"><CarOutlined/> 车辆ID: </Text>
          <Text>{lesson.plateNumber}</Text>
        </div>

        <Space size="large">
          <Statistic
            title="学员人数"
            value={`${lesson.currentStudents}/${lesson.maxStudents}`}
          />
          {lesson.remark && (
            <div>
              <Text type="secondary">备注: </Text>
              <Text>{lesson.remark}</Text>
            </div>
          )}
        </Space>
      </Space>
    </Card>
  );
};

export default LessonCard;
